<template>
	<view>
		<!-- 模态框 -->
		<view @tap="Modal" :class="{ mask: model }"></view>
		<!-- 弹窗主体 -->
		<view
			:style="{ height: barHidth + 'rpx' }"
			class="active"
			:class="{ add: model }"
		>
			<view class="title">
				筛选
			</view>
			<view class="tab">
				<view class="tabItem" v-for="(item,index) in tabList" :class="activeId == item.id ? 'activeId':''" @click="activeClick(item.id)">
					{{ item.name }}
				</view>
			</view>
			<view class="title">
				组织
			</view>
			<input type="text" class="input" v-model="text" placeholder="输入组织名称或关键字">
			<view class="title">
				时间
			</view>
			<view class="time">
				<input type="text" class="timeInput" v-model="time1" placeholder="开始时间">
				<text class="text">至</text>	
				<input type="text" class="timeInput" v-model="time2" placeholder="结束时间">
			</view>
			<view class="btns">
				<view class="btn" @click="resetting">
					重置
				</view>
				<view class="btn confirm" @click="showModal">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//控制弹窗的隐藏显示
			model: {
				type: Boolean,
				default: false,
			},
			//弹窗 窗口高度
			barHidth: {
				type: Number,
				default: 400,
			},
			//点击模态框是否能关闭弹窗
			showYes: {
				type: Boolean,
				default: true,
			},
		},
		data(){
			return{
				tabList: [{
					name: '报名中',
					id: 1
				},{
					name: '报名结束',
					id: 2
				},{
					name: '活动结束',
					id: 3
				}],
				activeId: '1',
				text: '',
				time1: '',
				time2: ''
			}
		},
		methods: {
			activeClick(index){
				this.activeId = index
			},
			// 关闭窗口
			showModal() {
				this.$emit("close", false);
			},
			resetting(){
				this.activeId = '1'
				this.text = ''
				this.time1 = ''
				this.time2 = ''
			}
		},
	}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  animation: getInto 0.5s 1;
  opacity: 0.5;
  z-index: 999;
}

@keyframes getInto {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.active {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 400rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  overflow: hidden;
  transform: translateY(100%);
  transition: 0.4s;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  padding: 0 40rpx;
  box-sizing: border-box;
}

.add {
  transform: translateY(0);
}

.title{
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
}

.tab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
.tabItem{
	width: 202rpx;
	height: 80rpx;
	background: rgba(153, 153, 153, .1);
	border-radius: 92rpx;
	color: #999999;
	line-height: 80rpx;
	text-align: center;
}
.activeId{
	background: rgba(39, 91, 168, 0.10);
	color: #275BA8;
	border: 1rpx solid #275BA8
}
.input{
	width: 100%;
	height: 80rpx;
	background: rgba(153, 153, 153, .1);
	border-radius: 108rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.time{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.timeInput{
	width: 280rpx;
	height: 80rpx;
	background: rgba(153, 153, 153, .1);
	border-radius: 108rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
}
.btns{
	width: 100%;
	display: flex;
	position: fixed;
	left: 0;
	bottom: 0;
	border-top: 2rpx solid #F1F1F1;
}
.btn{
	flex: 1;
	height: 92rpx;
	text-align: center;
	line-height: 92rpx;
	border-right: 1rpx solid #F1F1F1;
}
.confirm{
	border: none;
	color: #275BA8
}
</style>